<!-- 财务详情 -->
<template>
  <page-header-wrapper>
    <template>
      <a-card :bordered="false">
        <!-- 详情表单展示 start -->
        <a-descriptions bordered title="基本信息">
          <a-descriptions-item label="项目全名" :span="3">
            {{ detailsInfo.name }}
          </a-descriptions-item>
          <a-descriptions-item label="Protocol号"> {{ detailsInfo.protocolNo }} </a-descriptions-item>
          <a-descriptions-item label="项目编号"> {{ detailsInfo.no }} </a-descriptions-item>
          <a-descriptions-item label="立项时间">
            {{ detailsInfo.createTime | moment() }}
          </a-descriptions-item>
          <a-descriptions-item label="申办方">
            {{ detailsInfo.sponsorName }}
          </a-descriptions-item>
          <a-descriptions-item label="研究分期"> {{ detailsInfo.stage | filtersState }} </a-descriptions-item>
          <a-descriptions-item label="业务员"> {{ detailsInfo.businessName }} </a-descriptions-item>
        </a-descriptions>
        <a-descriptions bordered title="项目负责人" :style="{ margin: '20px 0' }">
          <a-descriptions-item label="负责人姓名"> {{ detailsInfo.pmName }} </a-descriptions-item>
          <a-descriptions-item label="手机号"> {{ detailsInfo.phone }} </a-descriptions-item>
          <a-descriptions-item label="身份证"> {{ detailsInfo.idCard }} </a-descriptions-item>
        </a-descriptions>
        <a-descriptions bordered title="项目费用" :style="{ margin: '20px 0' }">
          <a-descriptions-item label="项目预算"> {{ billInfo && billInfo.budget | formatAmount }}</a-descriptions-item>
          <a-descriptions-item label="合同编号"> {{ billInfo && billInfo.contractNo }}</a-descriptions-item>
          <a-descriptions-item label="已付金额"> {{ billInfo && billInfo.paid | formatAmount }} </a-descriptions-item>
          <a-descriptions-item label="项目余额"> {{ billInfo && billInfo.proBalance | formatAmount }} </a-descriptions-item>
          <a-descriptions-item label="待付金额"> {{ billInfo && billInfo.toPay | formatAmount }} </a-descriptions-item>
          <a-descriptions-item label="可用余额"> {{ billInfo && billInfo.avBalance | formatAmount }} </a-descriptions-item>
        </a-descriptions>
        <!-- 详情表单展示 end -->
        <div v-if="$auth('PROJECT.PROJECT_FEE_REVIEW')">
          <!-- 费用审核 -->
          <CostAuditing style="margin-top: 24px"></CostAuditing>
        </div>
        <!-- table切换 start -->
        <a-tabs :activeKey="isFinanceDetailSkip" size="large" @change="handleTabsChange">
          <a-tab-pane key="1" tab="付款明细" v-if="$auth('PROJECT.PROJECT_PAY')">
            <keep-alive>
              <PaymentList :datailId="$route.query.id" @billChange="billChange"/>
            </keep-alive>
          </a-tab-pane>
          <a-tab-pane key="2" tab="资金流水" v-if="$auth('PROJECT.PROJECT_INCOME')">
            <keep-alive>
              <FinanceList :datailId="$route.query.id" />
            </keep-alive>
          </a-tab-pane>
        </a-tabs>
        <!-- table切换 end -->
      </a-card>
    </template>
  </page-header-wrapper>
</template>

<script>
import monitor from '@/utils/monitor'
import treasure from '@/monitor/views/overview/detail/treasure/treasure'

import { getProjectDetail } from '@/api/overview/contract'
import PaymentList from './components/payment/PaymentList'
import FinanceList from './components/finance/FinanceList'
import CostAuditing from '@/views/cost-auditing/index'

import { CURRENT_PROJECT } from '@/store/mutation-types'
import storage from 'store'

const watch = monitor(treasure)
export default {
  name: '',
  components: {
    PaymentList,
    FinanceList,
    CostAuditing // 审核
  },
  // 从此页面跳转到资金流水详情再跳回来，仍保持跳转前的状态
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.isFinanceDetailSkip = from.name === 'FinanceDetail' ? '2' : '1'
    })
  },
  data () {
    return {
      datailId: 0,
      detailsInfo: {},
      isFinanceDetailSkip: '1',
      billInfo: {}
    }
  },
  created () {
    const pro = storage.get(CURRENT_PROJECT)
    if (pro != null && pro.length > 0) {
      const project = JSON.parse(pro)
      this.$route.query.id = project.id
    }
  },
  mounted () {
    this.financialDetails()
    this.payBrowse()
    console.log('123456')
    console.log(this.$store.state.app.financeKey, '123')
    if (this.$store.state.app.financeKey) {
      this.financeKey = this.$store.state.app.financeKey
    }
  },
  methods: watch({
    financialDetails () {
      if (this.$route.query.id) {
        getProjectDetail({
          id: this.$route.query.id
        }).then(res => {
          this.detailsInfo = res
        })
      }
    },
    // tab栏切换
    handleTabsChange (key) {
      this.isFinanceDetailSkip = key
      // this.$store.state.app.financeKey = key
      this.$store.commit('changeFinanceKey', key)
      if (parseInt(key) === 1) {
        this.payBrowse()
      } else {
        this.bankFlowBrowse()
      }
    },
    billChange (val) {
      this.billInfo = val
    },
    // 付款明细浏览埋点
    payBrowse () {},
    // 资金流水浏览埋点
    bankFlowBrowse () {}
  }),
  filters: {
    filtersState (val) {
      if (val === 1) {
        return 'Ⅰ期'
      } else if (val === 2) {
        return 'Ⅱ期'
      } else if (val === 3) {
        return 'Ⅲ期 '
      } else if (val === 4) {
        return 'Ⅳ期 '
      } else if (val === 5) {
        return '其他  '
      } else if (val === 6) {
        return 'BE'
      }
    }
  }
}
</script>
<style scoped lang="scss"></style>
